<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本&字体的属性(2)</title>
    <style>
        div {
            /* 预定义的颜色值 */
            color: blueviolet;
            /* 十六进制 */
            /* #ffffff，#ff6600,#000000等之类的。可以两两简写：#fff,#f60,#000等 */
            color: #000000;
            /* RGB */
            /* red,green,blue */
            color: rgb(255, 0, 0);
            /* RGB也可以写成下面的形式 */
            color: rgb(100%, 0%, 0%);

            /* 实际开发中最常用的是十六进制 */
        }

        h1 {
            /* 本质是盒子里面的文字水平居中对齐 */
            text-align: center;

            /* 右对齐 */
            /*text-align: right;*/

            /* 若不设置，默认左对齐 */
            /* text-align-last: left; */
        }

        .decoration {
            /* 默认，没有装饰线（最常用，例如去掉超链接的下划线） */
            text-decoration: none;

            /* 下划线，超链接自带下划线(常用) */
            text-decoration: underline;

            /* 上划线（几乎不用） */
            text-decoration: overline;

            /* 删除线（不常用） */
            text-decoration: line-through;

            /* 重点记住如何添加/删除下划线 */
        }

        p {
            /* 向右缩进20像素 */
            text-indent: 20px;
            /* 向左缩进20像素 */
            /* text-indent: -20px;*/

            /* 一般使用下面的方法 */
            text-indent: 2em;
            /* em是一个相对单位，1em相当于当前元素（font-size）1个文字的大小 */
            /* 如果当前元素没有设置大小，则会按照父元素的1个文字的大小 */
        }

        #LineHeight50 {
            line-height: 50px;
        }

        #LineHeight20 {
            line-height: 20px;
        }
    </style>
</head>

<body>
    <div>文本颜色</div>
    <h1>居中对齐的标题</h1>
    <div class="decoration">文本装饰</div>
    <p>文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进</p>

    <!-- 行间距分为：上间距、文高度、下间距 -->
    <!-- 上间距=下间距 -->
    <!-- 使行间距等于盒子的高度，会实现文本垂直居中（此部分后面学） -->
    <div id="LineHeight50">行间距<br>行间距<br>行间距<br></div>
    <div id="LineHeight20">行间距<br>行间距<br>行间距<br></div>
</body>


</html>